{% extends "base.html" %}
{% load i18n %}
{% block style %}
    <style>
        .fn {
            font: 14px/25px "微软雅黑";
            height: 30px;
            width: 320px;
        }
    </style>
{% endblock %}
{% block detail %}
    <div class="main">
        <div class="addFile">
            <h2 class="leftTitle"><span><b>{% trans 'file edit' %}</b></span></h2>

            <form id="fileupload" action="/fileupload/" method="POST" enctype="multipart/form-data">
                <input type="hidden" name="caseId" value="{{ caseId }}">

                <div class="fileBtn">
                    <input type="button" class="btn" value="{% trans 'add file' %}"/>
                    <input type="file" name="upload" class="file" multiple/>
                </div>
                <table width="200" border="1" id="files">
                    {% if video %}
                        {% for v in video %}
                            <tr>
                                <td class="name">{{ v.name }}</td>
                                <td class="size" width="130">{{ v.filesize }}</td>
                                <td class="start" width="145" align=center><a href="/case/attachment/del/{{ v.id }}"
                                                                              class="del">{% trans 'delete' %}</a>
                                </td>
                            </tr>
                        {% endfor %}
                    {% endif %}
                </table>
                <div class="rateLine" id="progress" style="display: none;">
                    <div class="rate"><p style="width:80%;">&nbsp;</p></div>
                    <span>80%</span>
                </div>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script type="text/javascript" src="/assets/js/ckeditor/ckeditor.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.fileupload.js"></script>
    <script src="/assets/js/jQuery-File-Upload-master/js/jquery.fileupload-ui.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#fileupload').fileupload({
                dataType: 'json',
                add: function (e, data) {
                    var row = $('<tr>' +
                            '<td class="name"><input type="text" name="filename" id="filename" class="fn"></td>' +
                            '<td class="size" width="130"><input type="hidden" name="filesize" id="filesize"></td>' +
                            '<td class="start" width="145" align=center><a href="###" class="upBtn">start</a><!--<a href="###" class="del">cancel</a>--></td></tr>');
                    row.find('#filename').val(data.files[0].name);
                    //row.find('.name').append(data.files[0].name);
                    row.find('.size').append(data.files[0].size + " Bytes");
                    row.find('#filesize').val(data.files[0].size);
                    data.context = row.appendTo($("#files"));
                    row.find(".upBtn").click(function () {
                        if (confirm("Confirm to upload file '" + $("#filename").val() + "'?")) {
                            $(".start").text("Uploading...");
                            data.submit();
                        }
                    });
                    row.find(".del").click(function () {
                        data.stop(e);
                    });
                },
                progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progress p').css('width', progress + '%');
                    $('#progress span').text(progress + '%');
                    $("#progress").show();
                },
                done: function (e, data) {
                    //data.context.text('Upload finished.');
                    $(".start").text("Upload finished.");
                    //alert(data.result.name);
                }
            });
        });
    </script>
{% endblock %}